<template>
  <!-- 头部 -->
  <div class="picvid">
    <div class="top">
      <a href="">北京</a>
      <h1>图片与视频</h1>
    </div>
  <!-- 酒店概览轮播图 -->
    <div class="overview">
      <div class="heading">
        <h2>酒店概览</h2>
      </div>
      <template>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_212_original.jpg" alt="">
            <div>
              <p>
                从位于26层的行政酒廊极目远眺,城市天际线与亮马河全景尽收眼底
              </p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_143_original.jpg" alt="">
            <div><p>酒店前台后方的大型抽象艺术品诚迎您的光临</p></div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_193_original.jpg" alt="">
            <div><p>
              Jayne Dyer创作的400只不锈钢蝴蝶在20层的中庭内"展翅飞翔
              </p></div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_146_original.jpg" alt="">
            <div>
              <p>北京套房的卧室舒适而温馨,整个空间以金色与蓝色点缀</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_512_original.jpg" alt="">
            <div>
              <p>皇家套房主浴室配备有宽敞淋雨间与深浸式大理石浴池,洋溢着艺术气息的装饰为您营造出雍容华贵的沐浴氛围</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_215_original.jpg" alt="">
            <div>
              <p>四季客房的休息区为您提供额外的放松空间</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_162_original.jpg" alt="">
            <div>
              <p>在可供八位宾客一同进餐的主厨餐桌尽享美味珍馐,由厨师为您现场制作精致时令佳肴</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_168_original.jpg" alt="">
            <div>
              <p>Mio 以惊艳的照明设计,营造出赏心悦目的用餐氛围78</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_239_original.jpg" alt="">
            <div>
              <p>温馨迷人的水疗护理室墙面以雕花镂空的木刻艺术装饰</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_250_original.jpg" alt="">
            <div>
              <p>整片落地窗将城市美景如唯美画作般妆点着室内泳池空间</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_036_original.jpg" alt="">
            <div>
              <p>参观在北京昵称为"鸟巢"的国家大剧院</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_033_original.jpg" alt="">
            <div>
              <p>北京国家体育馆"鸟巢"的夜景如梦如幻,美不胜收</p>
            </div>
          </swiper-slide>

          <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        </swiper>
      </template>
    </div>
    <!-- 体验轮播图 -->
    <div class="experience">
      <div class="heading">
        <h2>体验</h2>
      </div>
      <template>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_206_original.jpg" alt="">
            <div>
              <p>
                北京厅以明亮流畅的线条为您的活动增添高雅活泼的艺术调性
              </p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_202_original.jpg" alt="">
            <div><p>
              大宴会厅层高加倍，凹型天花板精致优雅，装点着温馨雅致的金色叶片
              </p></div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_208_original.jpg" alt="">
            <div>
              <p>我们的商务中心包含两间行政风格董事会议室，可供您私人使用</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_1683_original.jpg" alt="">
            <div>
              <p>室内旋涡池与泳池相邻，宾客可尽享畅泳与泡浴的双重体验</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_060_aspect16x9.jpg" alt="">
            <div>
              <p>享受游船体验，从不一样的视角欣赏北京风貌</p>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        </swiper>
      </template>
    </div>
    <!-- 客房与套房轮播图 -->
    <div class="room">
      <div class="heading">
        <h2>客房与套房</h2>
      </div>
      <template>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_074_original.jpg" alt="">
            <div>
              <span>豪华客房</span>
              <p>
                流线型设计的红木家具,精美艺术品与东方风格的木质氛围,完美与窗外城景相呼应,营造出轻松悠闲的居住氛围
              </p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_215_original.jpg" alt="">
            <div>
              <span>四季客房</span>
              <p>四季客房设计以温暖和谐的色调搭配红木家具,别具韵味,给予客人温暖放松,抒怀自在的感觉</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_096_original.jpg" alt="">
            <div>
              <span>大使套房</span>
              <p>深色木质装饰令转角套房倍感温馨迷人,从起居室与卧室均能欣赏窗外充满大都会气息的自然景致,配合四季酒店备受称颂的贴心服务,绝对是商务与度假旅客的理想居庭</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_145_original.jpg" alt="">
            <div>
              <span>北京套房</span>
              <p>享受亲切而温馨的家居氛围 富时代感的典雅设计,宽敞舒适的起坐间,带给您宾至如归的住宿体验</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_147_original.jpg" alt="">
            <div>
              <span>主席套房</span>
              <p>宽敞开发的起居用餐区方便您款待宾客,卧室氛围宁静悠然,配有特大床,休闲躺椅,写字桌和独立浴室,窗外雅致景色令人沉醉其中</p>
            </div>
          </swiper-slide>


          <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        </swiper>
      </template>
    </div>
    <!-- 餐饮美食轮播图 -->
    <div class="catering">
      <div class="heading">
        <h2>餐饮美食</h2>
      </div>
      <template>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_156_original.jpg" alt="">
            <div>
              <span>采逸轩</span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_168_original.jpg" alt="">
            <div>
              <span>热情洋溢的Mio意大利风情餐厅装饰时尚别致</span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_177_original.jpg" alt="">
            <div>
              <span>Opus大堂酒廊</span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_188_original.jpg" alt="">
            <div>
              <span>Opus大堂酒吧</span>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="../../public/img/photosvideos/BEJ_186_original.jpg" alt="">
            <div>
              <span>茶园</span>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        </swiper>
      </template>
    </div>
  </div>
</template>

<script>
// 轮播图
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: 'swiper-example-navigation swiper-example-centered-auto',
    title: 'Navigation + Centered slides + Auto slides per view',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: 30,
          loop: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  // @import '/base.scss';
// 轮播图动画
  @media (max-width: 100%) {
    .swiper-button-next {
      right: 20px;
      transform: rotate(90deg);
    }
// 轮播图左右按钮
    .swiper-button-prev {
      left: 20px;
      transform: rotate(90deg);
    }
  }
// 轮播图样式
  .swiper-slide {
    width: 60%;
    div{
      margin-top: 30px;
      width: 50%;
      span{
        display: block;
        padding-bottom: 10px;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .25em;
        line-height: 1.3333333333em;
        text-transform: uppercase;
      }
      p{
        font-size: 1.12rem;
        letter-spacing: 0.03em;
        line-height: 1.5em;
        font-family: Noto Sans SC,sans-serif;
      }
    }
  }
  .swiper{
    padding-top: 30px;
      img{
        width: 100%;
      }

  }

  .picvid{
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans SC',sans-serif !important;
  }
  .top{
    height: 75px;
    width: 80%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    a{
      font-size: 16px;
      text-decoration: none;
      line-height: 24px;
      color: #fff;
      font-style: italic;
    }
    h1{
      padding-top: 7px;
      font-size: 32px;
      line-height: 42px;
      letter-spacing: 5px;
      
    }
  }

  .overview,.room,.experience,.catering{
    padding-bottom: 70px;
    .heading{
      h2{
        padding-bottom: 30px;
        font-size: 1.5rem;
        letter-spacing: 0.16em;
        line-height: 1.3em;
        text-align: center;

      }
    }

  }
</style>
